<template>
    <div class="all-singer-mv clearfix">
      <div class="title">MV {{this.$route.params.mvtotal}}</div>
      <SingerMv :list="singerMv.list"></SingerMv>
      <Pagination @currentChange="currentChange" :total="singerMv.total" :page="currentPage" :size="20" v-show="singerMv.total>20"></Pagination>
    </div>
</template>
<script>
    import SingerMv from '@/components/SingerMv/SingerMv'
    import Pagination from "@/components/Pagination/Pagination"
    import {mapState} from 'vuex'
    export default {
        name: "AllSingerMv",
        data(){
          return{
            currentPage:1
          }
        },
        methods:{
          currentChange(value){
            this.currentPage=value;
          }
        },
        computed:{
          ...mapState(['singerMv'])
        },
        components:{
          SingerMv,
          Pagination
        },
        watch:{
          currentPage(value){
            this.$store.dispatch('getSingerMv',{singer_mid:this.$route.params.mid,begin:(value-1)*20,num:20,order:'listen'})
          }
        },
        mounted(){
          this.$store.dispatch('getSingerMv',{singer_mid:this.$route.params.mid,begin:(this.currentPage-1)*20,num:20,order:'listen'})
        }
    }
</script>

<style scoped lang="less">
  .all-singer-mv{
    width: 1200px;
    margin: 30px auto;
    .title{
      font-size:24px;
      line-height: 2;
    }
  }
</style>
